<template>
  <div class='after-sale first-box'>
    <div class="tab-box">
      <Tab :listData="tabData" :selected="selectedIndex" :className="{padding80:true}"></Tab>
    </div>
    <p class="title" v-show="selectedIndex==0"><span>记录列表</span><span v-show="selectedIndex==0" class="fr btn-active" @click="sendall">一键确认</span></p>

    <Scroll :hasmore="hasmore" :pullup="pullup" setHeight="-85">
      <List :data="listData" :selectIndex="selectedIndex"></List>
    </Scroll>
    <p style="display:none">{{getListData}}</p>
  </div>
</template>
<script>
import Tab from "../../common/tab"
import Scroll from "../../common/scroller"
import List from "./common/list"
export default {
  components: {Tab,Scroll,List},
  name: "",
  data() {
    return {
      tabData:[
        {
          name:"待确认",
          click:this.changeTab,
          type:0,
          num:20,
        },{
          name:"已确认",
          click:this.changeTab,
          type:1,
          num:0,
        }
      ],
      selectedIndex:0,
      
      hasmore:false,
      pageInfo:{
        page:1,
        size:10
      },

      height:"-85",

      listData:[
        // {
        //   id:1,
        //   name:"张无忌",
        //   phone:"12345678912",
        //   time:"2018-5-20 10:20",
        //   img:"https://bpic.588ku.com/element_pic/00/16/07/285798e2ef40806.jpg",
        // }
      ]

    };
  },
  computed:{
    getListData(){
      var params={
        status:this.selectedIndex==0?1:2,
        currPageNo:this.pageInfo.page,
        pageSize:10,
      }
      this.getList(params)
    }
  },
  methods: {
    changeTab(item){
      this.pageInfo.page=1
      this.selectedIndex=item.type
      this.height=this.selectedIndex==0?"-85":"-55"
      this.listData=[]
    },


    // 下拉刷新方法回调
    pullup(func){
      if(this.hasmore){
        this.pageInfo.page++
         _g.orderList([this.getList,func])
         return
      }

      func()
    },

    getList(params){
      var params=params||{
        status:1,
        currPageNo:this.pageInfo.page,
        pageSize:10,
      }
      _g.apiPost("afterBooking/bookInfo.do",params).then(res=>{
        this.hasmore=res.data.PageInfo.hasNextPage
        var goal=[]
        res.data.PageInfo.list.forEach(ele => {
            goal.push(
              {
                id:ele.id,
                name:ele.name,
                phone:ele.phone,
                time:ele.times,
                img:ele.headPic,
              }
            )
        });
        this.$set(this.tabData[0],"num",res.data.noConfirmNumber)
        this.$set(this,"listData",this.listData.concat(goal))
      })
    },

    // 一键派发
    sendall(){
      this.$store.state.dialogs.sure.content="是否一键派发？"
      this.$store.state.dialogs.sure.show=true
      this.$store.state.dialogs.sure.OK=this.sendOK
    },

    sendOK(){
      this.$store.state.dialogs.sure.show=false
      var idArray=this.listData.map(val=>val.id)
      _g.apiPost("afterBooking/confirm.do",{id:idArray.join(",")}).then(res=>{
        _g.toMessage(res)
        if(!res.error){
          this.pageInfo.page=1
          this.getList()
        }
      })
    }
  },
  created() {
    // this.getList()
  }
};
</script>
<style lang="scss" scoped>
.after-sale {
  background-color: #fff;
  .tab-box{
    background-color: #f2f2f2;
    padding-bottom: 5px;
  }
  .title{
    padding: 0 15px;
    font-size: 12px;
    line-height: 30px;
    color: #666;
    border-bottom: 1px solid #DBDBDB;
  }
  .btn-active{
    border: 1px solid #FF9F20;
    line-height: 20px;
    transform: translateY(4px);
    box-sizing: border-box;
    color: #FF9F20;
    border-radius: 2px;
  }
}
.padding80{
  padding-left: 80px;
  padding-right: 80px;
}
</style>